<template>
  <div class="content">
    <div class="bottom app-main-content-box">
      <iframe
        id="iframeId"
        ref="iframeRef"
        :src="iframeUrl"
        style="width:100%;height:82vh"
        frameBorder="0"
        @onload="load"
      />
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      iframeUrl: '',
      baseUrl: process.env.VUE_APP_CUS_FORM_URL // 开发的时候,需要把路径换成本地的
    }
  },
  created() {
    const { page_id, sign, op } = this.$route.query
    const app_token = getToken()
    this.iframeUrl = `${this.baseUrl}?sign=${sign}&page_id=${page_id}&app_token=${app_token}&op=${op}`
    if (op === 'edit' || op === 'copy') {
      this.pageJson = window.localStorage.getItem('pageJson'),
      this.status = window.localStorage.getItem('status')
    }
  },
  mounted() {
    const { op } = this.$route.query
    if (op === 'edit' || op === 'copy') {
      const iframe = document.querySelector('#iframeId')
      iframe.onload = () => {
        console.log('加载完成') // 这里偶尔不会触发
        this.$nextTick(() => {
          this.load()
        })
      }
    }
    this.handleAddListener()
  },
  methods: {
    load() {
      this.$refs.iframeRef.contentWindow.postMessage({ pageJson: this.pageJson, status: this.status }, this.baseUrl)
      console.log()
      // window.addEventListener(
      //   'message',
      //   (event) => {
      //     if (event.data === 'backRouter') {
      //       this.$router.push({
      //         name: 'DecorateModule'
      //       })
      //     }
      //     console.log('接收数据', event.data)
      //   }
      // )
    },
    handleAddListener() {
      // window.addEventListener(
      //     "message",
      //     this.handleReceiveMessage,
      //     false
      // );
      window.onmessage = (event) => {
        this.handleReceiveMessage(event)
      }
    },
    handleReceiveMessage(event) {
      window.removeEventListener('message', this.handleReceiveMessage)
      if (event.data.sign === 'backRouter') {
        this.$router.push({
          name: 'DecorateModule'
        })
      }
      if (event.data.sign === 'message') {
        const { op } = event.data.params
        const messageOp = {
          message: ({ type, content, title }) =>
            this.$message({
              type,
              message: content,
              title
            }),
          notification: ({ type, content, title }) =>
            this.$notify({ type, message: content, title })
        }
        messageOp[op](event.data.params)
      }
      console.log('接收数据', event.data)
      this.$nextTick(() => {
        this.handleAddListener()
      })
    }
  },
  search() {
  },
  // 重置
  reset() {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* tab */
.content {
    ::v-deep {
        .el-tabs__header {
            margin-bottom: 10px;
            background-color: #fff;
            border-radius: 0 0 5px 5px;
        }

        .el-tabs__active-bar {
            height: 4px;
        }

    }
}

.app-main-content-box {
    padding: 0;
}
</style>
